<template>
  <div>
    <!--需要打印的页面的某个div-->
    <div id="dynamic-table-page">
      <div>我是需要打印的内容</div>
    </div>
    <!--打印用的隐藏的iframe-->
    <iframe width="0" height="0" frameborder="0" id="oprs-iframe"></iframe>
    <button @click="doPrint">打印</button>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.setIframeCss();
  },
  methods: {
    setIframeCss() {
      // 在打印的iframe里加入项目已经写好的样式
      let syfPrint = document.getElementById("oprs-iframe");
      let documentHead = document.getElementsByTagName("head")[0];
      let iframeHead = syfPrint.contentDocument.getElementsByTagName("head")[0];
      iframeHead.innerHTML = documentHead.innerHTML;
    },
    doPrint() {
      this.setIframeCss(); // 打印的时候加入样式
      setTimeout(() => {
        let printHtml = document.getElementById("dynamic-table-page").innerHTML;
        let syfPrint = document.getElementById("oprs-iframe");
        syfPrint.contentDocument.body.innerHTML = printHtml;
        // 也可在此处修改要打印的html内容再调用打印
        syfPrint.contentDocument.execCommand("Print");
        // this.$refs.iframe.contentWindow.print(); // 也可试试这个方法打印
      }, 200);
    },
  },
};
</script>